<template>
<div>
  <div class="music-list">
    <div class="music-list-cover" v-for="(item,i) in ArtistList"
         @click="$global.goPage('/artistDetail/'+item.id)">
      <div class="cover">
        <span class="white-span"><i class="el-icon-video-play"></i>&nbsp;{{item.musicSize}}</span>
        <span class="white-span"><i class="el-icon-document"></i>&nbsp;{{item.albumSize}}</span>
      </div>
      <img :src="item.img1v1Url" class="music-list-img">
      <span class="music-list-span">{{ item.name }}</span>
    </div>
  </div>
</div>
</template>

<script>
export default {
name: "Artist",
  props:{
  ArtistList:{required:true}
  }
}
</script>
<style lang="less" scoped>
.music-list-cover{
  width: 150px;
  height: 150px;
  border-radius: 150px;
  .cover{
    width: 150px;
    bottom: -30px;
    text-align: left;
  }
  .music-list-img{
    width: 150px;
    height: 150px;
    border-radius: 150px;
    margin-bottom: 30px;
  }
}

</style>
